<template>
    <div class="detail-page">
        <div class="page-header">
            <div class="title">{{formData.title}}</div>
            <div class="desc"><span class="label">学段学科：</span><span>{{ formData.stageName }}</span></div>
            <div class="desc" v-if="formData.gradeName"><span class="label">年级：</span><span>{{ formData.gradeName}}</span></div>
        </div>
        <div class="detail-page-container">
            <div class="detail-sub-title">
                <span>教师团队</span>
                <span class="line"></span>
            </div>
            <TeacherList :data="formData.lecturerList"/>
            <div class="detail-sub-title mt30">
                <span>课程目录</span>
                <span class="line"></span>
            </div>
            <CatalogueDetail />
        </div>
    </div>
</template>
<script setup>
import TeacherList from '@/components/teacher-list/index.vue';
import { ref, onMounted } from 'vue';
import CatalogueDetail from './part/catalogue-detail.vue';
import { useRoute } from 'vue-router';
import { handleStageSubject } from '@/lib/biz-tools.js';

const route = useRoute();


const formData = ref({
    stageName: '',
    gradeName: ''
});

function getDetail () {
    G_transmit('courseDetail', {
        queries: {
           id: route.params.courseId
        }
    })
    .then((res) => {
        formData.value = res.data || {};
        formData.value.stageName = handleStageSubject(res.data?.stageSubjectList, '暂无');
        let gradeList = res.data?.gradeList.map(item => item.gradeName);
        formData.value.gradeName = gradeList.join('，');
    })
    .catch((err) => {
        console.log(err)
    })
}

onMounted(() => {
    getDetail();
})


</script>

<style lang="scss" scoped>
.detail-page {
    .page-header {
        background: #ffffff;
        
        color: var(--srt-main-text-color);
        padding: 20px;
        border-radius: 4px;

        .title {
           font-size: 18px;
           font-weight: bold;
                &::before {
                    content: '';
                    background: var(--srt-main-active-text-color);
                    width: 4px;
                    height: 18px;
                    background-size: contain;
                    display: inline-block;
                    margin-right: 10px;
                    vertical-align: middle;
                    transform: translateY(-1px);
                }
        }
        .desc{
            font-size: 14px;
            margin-top: 10px;
            margin-left: 14px;
            line-height: 22px;
            .label {
                color: var(--srt-color-gray);
            }
        }
    }
}

.detail-page-container {
    background: #FFFFFF;
    border-radius: 4px;
    margin-top: 20px;
    padding: 20px 20px;

    .teacher-list {
        display: flex;
        flex-wrap: wrap;
        li {
            width: 373px;
            height: 160px;
            background: #F7F9FA;
            border-radius: 5px;
            display: flex;
            align-items: center;
            padding: 14px;
            margin-bottom: 20px;
            margin-right: 20px;
            position: relative;
            border: 1px solid #F7F9FA;
            &:nth-child(3n) {
                margin-right: 0px;
            }
        }
        .head-img {
            width: 100px;
            height: 132px;
            border-radius: 4px;
            margin-right: 14px;
        }
        .teacher-content {
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
            flex-direction: column;
        }
        .name {
            font-size: 16px;
            color: var(--srt-main-text-color);
            max-width: 145px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1;
        }
        .address {
            font-size: 14px;
            margin-top: 8px;
            max-width: 145px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1;
        }
        .desc {
            width: 100%;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3; /* 这里是超出几行省略 */
            overflow: hidden;
            margin-top: 14px;
            line-height: 18px;
        }
    }

    .detail-sub-title {
        font-size: 16px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: var(--srt-color-black);
        margin-bottom: 14px;
        margin-top: 7px;
        position: relative;
        span {
            position: relative;
            z-index: 100;
        }
        .line {
            height: 4px;
            background: #e7f1ff;
            position: absolute;
            bottom: 2px;
            left: 0px;
            width: 64px;
            display: inline-block;
            z-index: 1;
        }
    }

    .mt30 {
        margin-top: 30px;
    }
}
 
</style>

